<template>
<div>
  <h1>添加供应商</h1>
  <el-button type="primary" @click="returnsupplier">返回</el-button>
  <el-form :rules="rules" ref="form" :model="form" label-width="130px">
  <el-form-item label="供应商名字" prop="name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
   <el-form-item label="供应商地址" prop="address">
    <el-input v-model="form.address" ></el-input>
  </el-form-item>
   <el-form-item label="供应商电话" prop="phone">
    <el-input v-model="form.phone"></el-input>
  </el-form-item>
  <el-form-item label="供应商网址" prop="website">
    <el-input v-model="form.website"></el-input>
  </el-form-item>
   <el-form-item label="供应商营业照片" prop="url">
  <el-upload
  class="avatar-uploader"
  action="/api/supplier/upload/add"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="showimg" :src="showimg" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
  </el-form-item>
  <el-form-item label="供应商备注">
    <el-input v-model="form.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="addsupplier('form')">立即创建</el-button>
    <el-button  @click="cancelsupplier">取消</el-button>
  </el-form-item>
</el-form>
</div>
  
</template>


<script>
export default {
  data() {
    return {
      form: {
        name: "",
        address: "",
        phone: "",
        website: "",
        url: "",
        desc: ""
      },
      showimg: "",
      rules: {
        name: [
          { required: true, message: "请输入名字", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { min: 11, max: 11, message: "请输入正确的号码", trigger: "blur" }
        ],
        website: [{ required: true, message: "请输入网址", trigger: "blur" }],
        url: [{ required: true, message: "请选择照片", trigger: "blur" }]
      }
    };
  },
  methods: {
    supplier() {
      this.$router.push({
        name: "供应商"
      });
    }, //文件上传成功时调用
    handleAvatarSuccess(res, file) {
      this.showimg = URL.createObjectURL(file.raw); //显示图片
      this.form.url = res.data[0]; //res得到服务器返回结果
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    addsupplier(from) {
      //添加
      this.$refs[from].validate(valid => {
        if (valid) {
          this.$store.dispatch("suppliers/addSupplier", this.form);
          this.$message("添加成功");
          setTimeout(() => {
            //添加成功后清空
            this.form = {};
            this.showimg = "";
            this.$router.push({
              name: "supplier"
            });
          }, 500);
        } else {
          this.$message("添加失败,请检查是否输入错误");
          return false;
        }
      });

    },
    cancelsupplier() {
      //取消
      setTimeout(() => {
        //添加成功后清空
        this.form = {};
        this.showimg = "";
      }, 500);
    },
    returnsupplier() {
      //返回
      this.$router.push({
        name: "supplier"
      });
    }
  }
};
</script>


<style scoped>
.el-input {
  width: 400px;
}
.el-time-picker {
  width: 300px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
